<template>
	<view class="content">
		<!-- 评价类容 -->
		<view class="pc-box">
			<view class="pc-item" v-for="(item,index) in pjlist">
				<view class="pc-i-t">
					<image :src="item.avatarUrl" mode="aspectFill" class="pimg"></image>
					<view class="pc-name">
						<view>{{item.userName}}</view>
						<u-rate :count="count" v-model="item.score" :disabled="true" size="28"></u-rate>
					</view>
				</view>
				<view class="pcon">
					{{item.content}}
				</view>
				<view class="piimg-box">
					<image :src="it" mode="aspectFill" v-for="(it,i) in item.urls" @click="previewImages(i,item.urls)">
					</image>
				</view>
				<view class="time">{{$u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
			</view>
		</view>
		<u-loadmore :status="status" :load-text="loadText" />
		<view class="no" v-if="pjlist.length==0">暂无评价~~~</view>
	</view>
</template>

<script>
	import {
		pjlist
	} from "../../api/product.js"
	export default {
		data() {
			return {
				id: "", //产品id
				pjlist: [],
				count: 5,
				num: 1,
				status: "loading",
				loadText: {
					loading: '努力加载中',
					nomore: '没有更多了'
				}
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getpj()
		},
		onReachBottom() {
			this.getpj()
		},
		methods: {
			// 获取评价
			async getpj() {
				let res = await this.get(pjlist, {
					pageSize: 10,
					pageNum: this.num,
					goodsId: this.id
				})
				this.num++
				if(res.data.length<10){
					this.status="nomore"
				}
				res.data.forEach(item => {
					let urls = JSON.parse(item.picUrls)
					item.urls = urls
					this.pjlist.push(item)
				})
			},
			// 查看大图
			previewImages(url, arr) {
				uni.previewImage({
					current: url,
					urls: arr
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.tttt {
		margin: 10rpx 0;
	}

	.guigeitem {
		padding: 4rpx 10rpx;
		font-size: 28rpx;
		line-height: 28rpx;
		border-radius: 10rpx;
	}

	.ggbox {
		display: flex;
		flex-direction: column;
	}

	.boxx {
		padding: 0 40rpx 40rpx;
	}

	.gcon {
		height: 66rpx;
		line-height: 66rpx;
		background-color: #F6F6F6;
		text-align: center;
		margin-top: 20rpx;
	}

	.no {
		text-align: center;
	}

	.piimg-box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.piimg-box>image {
		width: 120rpx;
		height: 120rpx;
		margin: 0 10rpx;
	}

	.guigeitemtitle {
		background-color: #999999;
		font-size: 24rpx;
		padding: 4rpx 14rpx;
		border-radius: 30rpx;
		margin: 10rpx 10rpx;
		color: #333;
	}

	.guigeitemtitlestyle {
		background-color: #F0812D !important;
		color: #FFFFFF !important;
	}

	.guigetitle {
		font-size: 26rpx;
		color: #666666;

	}

	.guigebox {}

	.numbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}

	.rect {
		width: 100%;
		height: 66rpx;
		background-image: linear-gradient(to right, #F3C44E, #ED6138);
		text-align: center;
		line-height: 66rpx;
		color: #FFFFFF;
		border-radius: 100rpx;
	}

	.geprice {
		font-size: 32rpx;
		color: #F0812D;
		font-weight: bold;
		margin-top: 40rpx;
	}

	.gename {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.r-g-box {
		width: 400rpx;
		height: 100%;
		margin-left: 20rpx;
	}

	.gebox {
		display: flex;
		height: 200rpx;
		align-items: center;
		position: relative;

	}

	.minimg {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
		background-color: #fff;
		overflow: hidden;
		border: 1px #999999 solid;
	}

	.minimg>image {
		width: 160rpx;
		height: 160rpx;
	}

	.warp {
		width: 750rpx;
		padding: 0;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.juli {
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.ago {
		font-size: 24rpx;
		font-weight: 400;
		color: #D6D6D6;
	}

	.after {
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.seckill_price {
		width: 490rpx;
		padding-left: 10rpx;
	}

	.pseckill_price {
		width: 490rpx;
		padding-left: 10rpx;
		display: flex;
		align-items: center;
	}

	.seckill {
		height: 88rpx;
		border-radius: 28rpx;
		background-color: #013A94;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 50rpx;
	}

	.btn {
		color: #FFFFFF;
		font-size: 26rpx;
		height: 60rpx;
		width: 152rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 60rpx;
		margin-right: 30rpx;
		background-color: #CE1616;
	}

	.btns {
		color: #FFFFFF;
		font-size: 26rpx;
		height: 60rpx;
		width: 152rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 60rpx;
		margin-right: 30rpx;
		background-color: #F09238;
	}

	.btnbox {
		width: 750rpx;
		height: 90rpx;
		background: #F6F6F6;
		opacity: 1;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.navb::after {
		content: "";
		width: 80rpx;
		height: 4rpx;
		background-color: #F09238;
		position: absolute;
		bottom: 0;
		left: -10rpx;
	}

	.fuwenb {}

	.dptitle {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 42px;
		color: #333333;
		opacity: 1;

	}

	.dplogo {
		display: flex;
		align-items: center;
		height: 70rpx;
	}

	.dp-box {
		width: 690rpx;
		height: 70rpx;
		margin: 40rpx auto 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.logo {
		width: 65rpx;
		height: 65rpx;
		border-radius: 65rpx;
		margin-right: 10rpx;
	}

	.allp {
		width: 241rpx;
		height: 60rpx;
		border: 1px solid #707070;
		opacity: 1;
		border-radius: 41rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 60rpx;
		color: #333333;
		opacity: 1;
		margin: auto;
		text-align: center;

	}

	.time {
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 300;
		line-height: 33rpx;
		color: #666;
		opacity: 1;
		margin-top: 20rpx;

	}

	.pcon {
		max-height: 66rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		color: #333333;
		opacity: 1;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */

	}

	.content {
		padding-bottom: 100rpx;
	}

	.pimg {
		width: 60rpx;
		height: 60rpx;
		background: rgba(0, 0, 0, 0);
		border-radius: 50%;
		opacity: 1;
		margin-right: 20rpx;

	}

	.pc-name {
		font-size: 24rpx;
		color: #666666;
	}

	.pc-item {
		width: 690rpx;
		margin: 0 auto 30rpx;
	}

	.pc-i-t {
		display: flex;
		align-items: center;
		height: 80rpx;
	}

	.good {
		font-size: 26rpx;
		line-height: 37px;
		color: #999999;

	}

	.pinjia {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;

	}

	.pj-box {
		width: 690rpx;
		height: 40rpx;
		margin: 20rpx auto 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.x-box {
		width: 690rpx;
		height: 40rpx;
		margin: 20rpx auto 30rpx;
		display: flex;
		justify-content: space-between;
		color: #666666;
	}

	.x-item {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #666666;
	}

	.pname {
		width: 690rpx;
		height: 90rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 45rpx;
		color: #000000;
		opacity: 1;
		margin: auto;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */

	}

	.by {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #999;
		padding: 4rpx 10rpx;
		border-radius: 40rpx;
		margin-left: 40rpx;
		border: 1px #999 solid;
	}

	.lickimg {
		width: 24rpx;
		height: 20rpx;
		position: absolute;
		right: 40rpx;
	}

	.salesActual {
		position: absolute;
		right: 40rpx;
	}

	.price {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #F09238;
		opacity: 1;

	}

	.p-box {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.num {
		position: absolute;
		right: 40rpx;
		bottom: 40rpx;
		background-color: rgba(0, 0, 0, 0.7);
		color: #FFFFFF;
		padding: 4rpx 10rpx;
		border-radius: 30rpx;
		line-height: 24rpx;
		font-size: 24rpx;
	}

	swiper-item {
		width: 750rpx;
		height: 750rpx;
	}

	swiper-item>image {
		width: 750rpx;
		height: 750rpx;
	}

	.swiper {
		width: 750rpx;
		height: 750rpx;
	}

	.swiperbox {
		width: 750rpx;
		height: 750rpx;
		position: relative;
	}

	.slot-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 500rpx;
		margin: auto;
		padding-right: 80rpx;
		position: relative;
	}

	.navitem {
		margin: 0 20rpx;
		padding: 20rpx 0;
		height: 100%;
		font-size: 28rpx;
		font-weight: bold;
		position: relative;
	}

	.cart {
		position: absolute;
		right: 0;
		right: -40rpx;
	}
</style>
